<template>
  <div class="p-4 w-full h-full">
    <div
      class="w-full h-full bg-[#252931] p-3 rounded-md border border-[#4c4d4f] border-solid"
    >
      <div
        class="w-full h-[10%] flex justify-start gap-11 text-[0.75vw] pl-2 items-center"
      >
        <div
          class="cursor-pointer hover:text-[var(--them-color2)] relative w-auto pb-1 font-bold"
          v-for="(i, index) in topnav"
          :key="i.name"
          @click="s_change(index, i.v)"
          :class="{
            'before:contents-[``] before:absolute before:w-1/2 before:h-[1px] before:rounded before:bg-[--them-color] before:left-1/2 before:bottom-0 before:translate-x-[-50%] text-[--them-color]':
              currentpage == index,
          }"
        >
          {{ i.name }}
        </div>
      </div>
      <div class="w-full h-[20%] grid grid-cols-3 grid-row-3 px-3 gap-x-10">
        <div class="flex items-center w-full">
          <div class="text-[0.65vw] w-[3vw]">店铺ID</div>
          <input
            v-model="seachvalue.id"
            class="input-s"
            type="number"
            placeholder="请输入店铺ID"
          />
        </div>
        <div class="flex items-center w-full">
          <div class="text-[0.65vw] w-[3vw]">店铺名称</div>
          <input
            v-model="seachvalue.titname"
            class="input-s"
            type="text"
            placeholder="请输入店铺名称"
          />
        </div>
        <div class="flex items-center w-full">
          <div class="text-[0.65vw] w-[3vw]">真实姓名</div>
          <input
            v-model="seachvalue.pername"
            class="input-s"
            type="text"
            placeholder="请输入真实姓名"
          />
        </div>
        <div class="flex items-center w-full">
          <div class="text-[0.65vw] w-[3vw]">手机号码</div>
          <input
            v-model="seachvalue.phone"
            class="input-s"
            type="phone"
            maxlength="11"
            placeholder="请输入手机号码"
          />
        </div>
        <div class="flex items-center w-full">
          <div class="text-[0.65vw] w-[3vw]">所在地</div>
          <input
            v-model="seachvalue.address"
            class="input-s"
            type="text"
            placeholder="请输入所在地"
          />
        </div>
        <div class="flex items-center w-full">
          <div class="text-[0.65vw] w-[3vw]">提交时间</div>
          <el-date-picker
            class="!w-[calc(100%-3vw)] !h-[2vw] ml-3 !text-[0.7vw] !text-[#a0a4a7]"
            type="date"
            placeholder="选择时间"
            v-model="timevalue"
            @change="changetome"
            @clear="cleartime"
          />
          <!-- <input
          
            type="text"
            placeholder="请输入提交时间"
          /> -->
        </div>
      </div>
      <div class="w-full h-[10%] flex gap-4 pl-3 text-[0.65vw] items-center">
        <div
          class="cursor-pointer w-[3vw] h-[45%] bg-orange-400 hover:bg-orange-500 rounded flex items-center justify-center"
          @click="reset"
        >
          重置
        </div>
        <div
          @click="seachdata"
          class="cursor-pointer w-[3vw] h-[45%] bg-[--them-color2] hover:bg-[--them-color] rounded flex items-center justify-center"
        >
          搜索
        </div>
      </div>
      <div class="w-full h-[55%] px-3 !rounded overflow-hidden">
        <el-table
          v-if="showshopdata"
          border
          class="!h-full !text-[0.7vw] !rounded"
          :data="showshopdata.rows"
        >
          <el-table-column
            label="店铺ID"
            width="80"
            align="center"
            prop="id"
          ></el-table-column>
          <el-table-column
            width="260"
            align="center"
            label="店铺名称"
            prop="dname"
          ></el-table-column>
          <el-table-column
            width="100"
            align="center"
            label="真实姓名"
            prop="name"
          ></el-table-column>
          <el-table-column
            width="150"
            align="center"
            label="手机号码"
            prop="phone"
          ></el-table-column>

          <el-table-column
            width="250"
            align="center"
            label="地址"
            prop="address"
          ></el-table-column>

          <el-table-column
            align="center"
            label="提交时间"
            prop="createdAt"
          ></el-table-column>
          <el-table-column align="center" label="店铺状态">
            <template #="{ row }">
              <div>{{ isstatus(row.status) }}</div>
            </template>
          </el-table-column>
          <el-table-column width="80" align="center" label="操作">
            <template #="{ row }">
              <el-dropdown>
                <div class="iconfont icon-bianji"></div>
                <template #dropdown>
                  <el-dropdown-item
                    v-if="row.status == 0"
                    @click="shopshop(row)"
                    >处理店铺</el-dropdown-item
                  >
                  <el-dropdown-item
                    v-if="row.status == 1"
                    @click="s_shopclose(row)"
                    >关闭店铺</el-dropdown-item
                  >
                  <el-dropdown-item
                    v-if="row.status == 2"
                    @click="s_shopopen(row)"
                    >开启店铺</el-dropdown-item
                  >
                </template>
              </el-dropdown>
            </template>
          </el-table-column>
        </el-table>
      </div>
      <div class="w-full h-[5%] px-3 flex justify-center items-end mt-1">
        <el-pagination
          v-if="showshopdata"
          size="small"
          background
          layout=", prev, pager, next, jumper,total"
          :total="showshopdata.count"
          :default-page-size="7"
          @change="changepage"
        />
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref, onMounted } from "vue";
import { useRouter } from "vue-router";
import type { seachvaluetype } from "./type";
import { getshopdata, shopclose, shopsucc } from "@/api/index";
import { ElMessage } from "element-plus";
const router = useRouter();
const currentpage = ref(0);
//0申请中  1 已入住  2已冻结 4申请失败
const topnav: { name: string; v: string }[] = [
  {
    name: "全部店铺",
    v: "3",
  },
  {
    name: "开店申请审核",
    v: "0",
  },
  {
    name: "已入住店铺",
    v: "1",
  },
  {
    name: "已关闭店铺",
    v: "2",
  },
  {
    name: "已退回",
    v: "4",
  },
];

const offset = ref<number>(1);
const limit = ref<number>(8);
const seachvalue = ref<seachvaluetype>({
  id: "",
  titname: "",
  pername: "",
  phone: "",
  time: "",
  address: "",
  status: "3", //0 没申请 1 申请中 2 已入住 3 all
});
const showshopdata = ref();
const timevalue = ref();
onMounted(() => {
  seachbox();
});
const shopshop = (row: any) => {
  router.push({
    path: "/index/shopshow",
    query: { data: JSON.stringify(row) },
  });
};
const isstatus = (status: any) => {
  if (status == 0) {
    return "申请中";
  } else if (status == 1) {
    return "已入住";
  } else if (status == 2) {
    return "已关闭";
  }
  return "已退回";
};
const s_change = (e: number, v: string) => {
  if (seachvalue.value.status == v) return;
  currentpage.value = e;
  seachvalue.value.status = v;
  seachbox();
};
const changetome = (e: any) => {
  if (!e) return;
  const date = new Date(e);
  const year = date.getFullYear();
  const month = (date.getMonth() + 1).toString().padStart(2, "0");
  const day = date.getDate().toString().padStart(2, "0");
  const time = `${year}-${month}-${day} `;
  seachvalue.value.time = time;
};
const reset = (): void => {
  seachvalue.value = {
    id: "",
    titname: "",
    pername: "",
    phone: "",
    time: "",
    address: "",
    status: "3", //0 申请中 1已入住  2已关闭  3 all
  };
};
const cleartime = () => {
  seachvalue.value.time = "";
};
const seachdata = () => {
  offset.value = 1;
  seachbox();
};
const seachbox = async () => {
  const rudata = await getshopdata(offset.value, limit.value, seachvalue.value);
  if (rudata.code == 200) {
    showshopdata.value = rudata.data;
    console.log(rudata);
  }
};
const changepage = (e: any) => {
  offset.value = e;
  seachbox();
};
const s_shopclose = async (row: any) => {
  const rudata = await shopclose(row.userid, row.id);
  if (rudata.code == 200) {
    seachbox();
    ElMessage({
      type: "success",
      message: "店铺关闭成功",
    });
  }
};
const s_shopopen = async (row: any) => {
  const rudata = await shopsucc(row.userid, row.id);
  if (rudata.code == 200) {
    seachbox();
    ElMessage({
      type: "success",
      message: "店铺开启成功",
    });
  }
};
</script>
